<template>
  <a-card :bordered="false">
    <div class="container">
<!--      <div class="top">-->
<!--        <div class="wid">-->
<!--          <h2>{{this.postingtitle}}</h2>-->
<!--          -->
<!--        </div>-->
<!--      </div>-->
      <div class="needs">
        <div class="wid" style="padding-right: 5px">
          <div class="wrap">
            <div class="page-tit">
              <div class="fr"><i>*</i><span>为必填项</span></div>
            </div>
            <div class="item">
              <div class="title"><b style="color: #2d2d2d;font-size: 16px;margin-bottom: 16px;margin-top: -10px">里布基础信息</b></div>

 <a-row :gutter="24">

	 <a-col :xl="7" :lg="7" :md="8" :sm="24">
	   <a-form-item label="里布编号" required>
	        <a-input style="width: 200px;"  placeholder="请输入里布编号" v-model="libuCode" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')"></a-input>
	   </a-form-item>
	 </a-col>


	 <a-col :xl="7" :lg="7" :md="8" :sm="24">
	   <a-form-item label="品牌">
	        <a-input style="width: 200px;"  placeholder="请输入品牌" v-model="brand" ></a-input>
	   </a-form-item>
	 </a-col>


	 <a-col :xl="7" :lg="7" :md="8" :sm="24">
	   <a-form-item label="排序">
	       			<a-input    style="width: 200px"  type="number" v-model="sortField"></a-input>
	   </a-form-item>
	 </a-col>
	  </a-row>

	<a-row :gutter="24">
			<a-col :xl="7" :lg="7" :md="8" :sm="24">
			   <a-form-item label="配置" required>
			   <a-select
			   v-model="colorType"
			     style="width: 200px"
			     @focus="focus"
			     ref="select"
			     @change="handleChange"
			      placeholder="里布配置"
			   >
			     <a-select-option value="0">
			       单色
			     </a-select-option>
			     <a-select-option value="1">
			        双色
			     </a-select-option>
				 <a-select-option value="2">
				    三色
				 </a-select-option>
			   </a-select>
			   </a-form-item>
			 </a-col>

	       <a-col :xl="7" :lg="7" :md="8" :sm="24">
	          <a-form-item label="类型" required>
	          <a-select
	          v-model="libuType"
	            style="width: 200px"
	            @focus="focus"
	            ref="select"
	            @change="handleChange"
	             placeholder="请选择状态"
	          >
	            <a-select-option value="0">
	              经典里布
	            </a-select-option>
				  <a-select-option value="1">
				    高级里布
				  </a-select-option>
	            <a-select-option value="2" >
	               时尚里布
	            </a-select-option>
	          </a-select>
	          </a-form-item>
	        </a-col>


			  <a-col :xl="6" :lg="7" :md="8" :sm="24">
			    <a-form-item label="供应商" required>
			         <a-select
			         class="
			         input"
			           style="width: 200px"
			           v-model="sysuserId"
			           placeholder="请选择供应商"
			         >
			           <a-select-option :label="item.realname" :value="item.id"  v-for="(item,key) in gyslist" :key="item.realname">
			             {{item.realname}}
			           </a-select-option>
			         </a-select>
			    </a-form-item>
			  </a-col>
	     </a-row>

		   <a-row :gutter="24">

		     <a-col :xl="7" :lg="7" :md="8" :sm="24">
		       <a-form-item label="售价加价" required>
		            <a-input style="width: 200px;"  placeholder="请设置售价加价" v-model="salesPrice"></a-input>
             <span style="margin-left: 5px">￥/元</span>
		       </a-form-item>
		     </a-col>

			 <a-col :xl="7" :lg="7" :md="8" :sm="24">
			   <a-form-item label="成本加价" required>
			          <a-input style="width: 200px;"  placeholder="请设置成本加价" v-model="costPrice"></a-input>
           <span style="margin-left: 5px">￥/元</span>
			   </a-form-item>
			 </a-col>
			 </a-row>
          </div>


            <div class="item">
              <div style="width: 100%;overflow: hidden;">
                <a-row :gutter="24">
                  <a-col :xl="7" :lg="7" :md="8" :sm="24">
                    <a-form-item label="里布图片" required>
                      <j-image-upload class="avatar-uploader" text="上传" v-model="libuImg" ></j-image-upload>
                    </a-form-item>
                  </a-col>

                  <a-col :xl="7" :lg="7" :md="8" :sm="24">
                    <a-form-item label="备注">
                      <a-textarea placeholder="请填写你的备注" :rows="4"  v-model="remark" style="width: 380px;"/>
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </div>

          <div class="submit">
            <button class="c1" @click="addCustomer()">保存提交</button>
          <!--  <button class="c2">重置</button> -->
          </div>
        </div>
      </div>
    </div>
    </div>
    <!--    <LgyxPostingRequirements-modal ref="modalForm" @ok="modalFormOk"></LgyxPostingRequirements-modal>-->
  </a-card>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import {
    mixinDevice
  } from '@/utils/mixin'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import '@/assets/less/TableExpand.less'
  import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
  import JDate from '@/components/jeecg/JDate.vue'
  import {
    deleteAction,
    getAction,
    putAction,
    postAction,
    downFile,
    getFileAccessHttpUrl
  } from '@/api/manage'
  // 引入搜索部门弹出框的组件
  // import JImageUpload from '../../../components/jeecg/JImageUpload'
  import JImageUpload from '../../components/jeecg/JImageUpload'

  export default {
    name: "addCustomer",
    mixins: [mixinDevice, JeecgListMixin],
    components: {
      JDate,
      JAreaLinkage,
      JImageUpload
    },
    data() {
      let self = this
      return {
		  sortField:0,
		   gysList:{},
        businessLicense:'', //营业执照
      colorType:'请选择配置',
	  libuType:'请选择里布类型',
     libuCode:'',
     libuName:'',
     sysuserId:'请选择供应商',
     brandLabels:'',
     brand:'',
     salesPrice:'',
     costPrice:'',
     isMonth:0,
	    libuImg:'',
     inventory: '',
		  remark:'',
        isshenhe:'',//需求是否需要审核
        flag:false, //数据验证的最终结果
        url: {
          list: "/total/sys_user/query_totalSysuser_Detail",
           detail:"/LibuManage/getLibubyId",
          add:"/LibuManage/addLibu",
          update:"/LibuManage/updateLibu",
		    gysList: '/fabricCenter/selectGYS', // 供应商列表
        },
      }
    },
    created() {
		   this.getgys();
      if(this.$route.query.id==0){
      }else{
          let id=this.$route.query.id;
       getAction(this.url.detail,{"id":id}).then((res)=>{
              if(res.success){
                this.libuName=res.result.libuName;
               this.libuCode=res.result.libuCode;
                this.sysuserId=res.result.sysuserId;
                   this.brand=res.result.brand;
                   this.colorType=res.result.colorType;
                   this.libuType=res.result.libuType;
                   this.salesPrice=res.result.salesPrice;
                   this.costPrice=res.result.costPrice;
				   this.inventory=res.result.inventory;
				    this.remark=res.result.remark;
                    this.libuImg=res.result.libuImg;
					  this.sortField=res.result.sortField;
              }else{
                this.$message.warning(res.message);
              }
            })
      }

    },
    computed: {
      uploadAction: function() {
        return this.url.fileUpload;
      }
    },
    methods: {
			getgys() { // 获取供应商列表
			  getAction(this.url.gysList).then(res => {
			    this.gyslist = res.result
			  })
			},
     addCustomer(){
			  var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
     if(this.libuCode==''){
					 this.$message.warning("未输入编号，请输入");
					 return;
				};
       if(this.colorType=='' || this.colorType=='请选择配置'){
         this.$message.warning("未选择里布配置，请选择");
         return;
       };
       if(this.libuType=='' || this.libuType=='请选择里布类型'){
         this.$message.warning("未选择里布类型，请选择");
         return;
       };
       if(this.sysuserId=='' || this.sysuserId=='请选择供应商'){
         this.$message.warning("未选择供应商，请选择");
         return;
       };

       if(this.salesPrice==''){
         this.$message.warning("未输入售价加价，请输入");
         return;
       };
       if(!reg.test(this.salesPrice)){
         this.$message.warning("请输入正确的售价加价金额")
         return
       }
       if(this.costPrice==''){
         this.$message.warning("未输入成本加价，请输入");
         return;
       };
       if(!reg.test(this.costPrice)){
         this.$message.warning("请输入正确的成本加价金额")
         return
       }
       if(this.libuImg=='' || this.libuImg==null){
         this.$message.warning("请上传里布图片");
         return;
       };
       let formData={
              "id":this.$route.query.id,
             "libuName":this.libuName,
             "libuCode":this.libuCode,
             "sysuserId":this.sysuserId,
             "brand":this.brand,
             "colorType":this.colorType,
             "libuType":this.libuType,
             "salesPrice":this.salesPrice,
              "costPrice":this.costPrice,
              "inventory":this.inventory,
              "remark":this.remark,
			  "libuImg":this.libuImg,
			  "sortField":this.sortField
       };
             let url;
            if(this.$route.query.id==0){
              url=this.url.add;
            }else{
                 url=this.url.update;
            }
           postAction(url,formData).then((res)=>{
              if(res.success){
                this.$message.success(res.message);
                this.$router.push({path:'/LibuManage'})
              }else{
                this.$message.warning(res.message);
              }
            }).finally(() => {
              this.confirmLoading = false;
              this.close();
            })
     },

      /**
       * 解析经纬度成地址
       * @param pos
       */
      setAssres(pos) {
        let self = this
        // 这里通过高德 SDK 完成。
        let geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
        })
        self.curMarker = pos
        geocoder.getAddress(pos, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.regeocode) {
              self.map_address = result.regeocode.formattedAddress;
              self.$nextTick();
            }
          }
        })
      },
      /**
       * 搜索
       * @param pois
       */
      onSearchResult(pois) {
        console.log('pois', pois)
        let latSum = 0;
        let lngSum = 0;
        if (pois.length > 0) {
          let pos = pois[0]
          this.center = [pos.lng, pos.lat]
          this.setAssres(this.center)
        }
      },
      initDictConfig() {

      },
      getPcaText(code) {
        return this.pcaData.getText(code);
      },

    },
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  @import '~@assets/less/style.min.css';
  @import '~@assets/less/addzhaopin.css';
  @import '~@assets/less/newstyle.css';
</style>
